<template>
<div>
  <h1>App根组件</h1>
  <!-- 在template模板结构中使用注册的TodoList组件 -->
  <!-- :list是参数，一加载TodoList组件,就去组件里面找到props的list属性参数,里面放的是计算属性 -->
  <TodoList :list="tasklist" class="mt-2"></TodoList>
  <!-- 监听TodoInput组件的add自定义事件，接受该事件传来的相关参数，拿到参数执行相关方法 -->
  <TodoInput @add="onAddNewTask"></TodoInput>
  <!--  -->
  <TodoButton v-model:active="activeBtnIndex"></TodoButton>

</div>
</template>

<script>
// 导入TodoList组件
import TodoList from './components/todo-list/TodoList.vue';
// 导入TodoInput组件
import TodoInput from './components/todo-input/TodoInput.vue';
// 导入TodoButton组件
import TodoButton from './components/todo-button/TodoButton.vue';
export default{
  name:'MyApp',
  // 2.注册私有组件
  components:{
    TodoList,
    TodoInput,
    TodoButton,
  },
  data(){
    return{
      // 任务列表的数据
      todolist:[
        {id:1,task:'周一早晨9点开会',done:false},
        {id:2,task:'周一晚上8点聚餐',done:false},
        {id:3,task:'准备周三上午的演讲稿',done:true},
      ],
      // 下一个可用的id
      nextId:4,
      activeBtnIndex:0,
    }
  },
  // 计算属性
  computed:{
    tasklist(){
      switch(this.activeBtnIndex){
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(x=>x.done===true)
        case 2:
          return this.todolist.filter(x=>x.done!==true)
      }
    }
  },
  // 方法
  methods: {
    // add事件的处理函数
    onAddNewTask(taskname){
      // 1.向任务列表中新增任务信息
      this.todolist.push({
        id:this.nextId,
        task:taskname,
        done:false,//完成状态默认为false
      })
      // 2.让nextId自增+1
      this.nextId++
    }
  },
}
</script>

<style lang="less" scoped></style>